<template>
  <div class="lsc-reg">
    <div class="lsc-center">
      <img :src="logoUrl" style="width:40%;">
    </div>
    
    <van-steps :active="active">
      <van-step>账号填写</van-step>
      <van-step>信息完善</van-step>
      <van-step>账号审核</van-step>
    </van-steps>
    <div class="lsc-reg-step1" v-if="active===0">
      <van-field
        v-model="reg.name"
        label="用户名"
        placeholder="请输入用户名"
        icon="clear"
        @click-icon="reg.name = ''"
      />
      <van-field
        v-model="reg.pwd"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
      <van-field
        v-model="repwd"
        type="password"
        label="确认密码"
        placeholder="请确认密码"
      />
      <div style="padding: 20px 10px;text-align:center">
        <van-button type="primary" size="large" @click="onRegister">注册</van-button>
        <router-link class="lsc-reg-login" to="/login">已有账号？返回登录</router-link>
      </div>
    </div>
    <div class="lsc-reg-step2" v-if="active===1">
      <van-address-edit
        :area-list="areaList"
        @save="onRegisterSubmit"
      />
    </div>
    <div class="lsc-reg-step3" v-if="active===2">
      <div class="lsc-reg-close">
        <van-icon name="points-mall" class="lsc-reg-close-icon"/>
        <p>您的注册已提交成功，我们会尽快审核。</p>
        <p>如有疑问，请致电我们！</p>
        <p>客服电话：400-6080-198</p>
      </div>
      <div style="padding: 20px 10px;">
        <van-button type="primary" size="large" @click="onRegisterClose">关闭</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../../api'
import areaList from '../../area'
import areaIdList from '../../areaid'
import { mapGetters } from 'vuex'

export default {
  name: 'reg',
  computed: {
    ...mapGetters({
      logoUrl: 'getLogoUrl'
    })
  },
  data () {
    return {
      active: 0,
      areaList,
      areaIdList,
      reg: {
        name: '',
        pwd: '',
        openid: localStorage.openId
      },
      repwd: '',
      commitCheck: {
        agent_id: 0,
        contact_man: "string",
        contact_tel: "string",
        province_id: 0,
        city_id: 0,
        area: "string",
        address: "string"
      }
    }
  },
  created() {
    this.active = this.$route.query.active*1 || 0
    if(!this.logoUrl) {
      this.$store.dispatch('fetchLogoUrl')
    }
  },
  methods: {
    getProvincesId(data) {

      let findProvincesId = this.areaIdList.provinces
      return findProvincesId.findIndex((value) => {
        return value.province_name == data
      })
    },
    getCitysId(data) {

      let findCitysId = this.areaIdList.citys
      return findCitysId.findIndex((value) => {
        return value.city_name == data
      })
    },
    setDefalut() {
      setTimeout(()=>{
        document.querySelectorAll('input')[0].placeholder = '业务联系人'
        document.querySelectorAll('.van-cell__text')[0].innerText = '联系人'
        document.querySelectorAll('.van-cell__text')[2].innerText = '所在省市'
        document.querySelector('.lsc-reg-step2 .van-button__text').innerHTML = '提交审核'
      },1)
    },
    onRegister() {

      let validRegister = this.validRegister(); // 校验手机号码
      if (validRegister) return;
      this.$toast.loading({
        duration: 0,
        message: '注册中...'
      });

      this.axios.post(api.register.reg, this.reg)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            localStorage.agentId = res.data.data
            this.active = 1
            this.setDefalut()
          }
        })
    },
    validRegister() {
      if(!this.reg.name) {
        this.$toast('请填写用户名')
        return true;
      }
      if(!this.reg.pwd) {
        this.$toast('请填写密码')
        return true;
      }
      if(this.reg.pwd.length < 6) {
        this.$toast('密码不能少于6位数！')
        return true;
      }
      if(this.reg.pwd !== this.repwd) {
        this.$toast('密码确认有误')
        return true;
      }
    },
    onRegisterSubmit(content) {
      this.commitCheck = {
        agent_id: localStorage.agentId,
        contact_man: content.name,
        contact_tel: content.tel,
        province_id: this.getProvincesId(content.province) + 1,
        city_id: this.getCitysId(content.city) + 1,
        area: content.county,
        address: content.address_detail
      }

      this.$toast.loading({
        duration: 0,
        message: '提交中...'
      });

      this.axios.post(api.register.commitcheck, this.commitCheck)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            this.active = 2
          }
        })
    },
    onRegisterClose() {
      WeixinJSBridge.call("closeWindow")
    }
  }
}
</script>
<style>

.van-step--horizontal .van-step__title {
  font-size: 14px;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-reg>.lsc-center>img {
  margin: 30px auto;
}
.lsc-center {
  text-align: center;
}
.lsc-reg-close {
  padding-top: 10px;
  padding-left: 110px;
  position: relative;
  padding-bottom: 50px;
  background: #fff;
}
.lsc-reg-close-icon {
  position: absolute;
  left: 15px;
  top: 25px;
}
.lsc-reg-close-icon::before {
  font-size: 80px;
  color: #4b0;
}
.lsc-reg-close p {
  margin-top: 1em;
}
.lsc-reg-login {
  display: block;
  margin-top: 10px;
  color: #999; 
}
</style>
